<template>
  <a-table :columns="column" :data-source="classifies">
    <template #bodyCell="{column, record}">
      <template v-if="column.key === 'operation'">
        <a-button type="link" @click="openClassifyBlogView(record.id)">查看文章</a-button>
        <a-popconfirm title="您确定要删除这个分类吗" okText="确认" cancelText="取消" @confirm="deleteClassify(record.id)">
          <a-button type="link" danger>删除分类</a-button>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
  <ClassifyBlogView :visible="classifyView.visible" :classify-id="classifyView.id" @close="classifyView.visible = false" />
</template>

<script setup>
import {apiDelete} from "../../../../fentch";
import {message} from "ant-design-vue";
import ClassifyBlogView from "./ClassifyBlogView.vue";
import {ref} from "vue";

const props = defineProps({
  classifies: {
    type: Array,
    required: true,
    default: []
  }
})

const classifyView = ref({
  visible: false,
  id: 0
})

const openClassifyBlogView = id => {
  classifyView.value.visible = true
  classifyView.value.id = id
}

const emit = defineEmits(['reload'])

const deleteClassify = id => {
  apiDelete(`/classify/${id}`).then(res => {
    if (res.data.code === 0) {
      emit('reload')
      return
    }
    message.error(res.data.message)
  })
}

const column = [
  {key: 'id', title: 'ID', dataIndex: 'id'},
  {key: 'name', title: '名称', dataIndex: 'name'},
  {key: 'description', title: '简介', dataIndex: 'description'},
  {key: 'article_count', title: '文章数目', dataIndex: 'article_count'},
  {key: 'created_at', title: '创建时间', dataIndex: 'created_at'},
  {key: 'operation', title: '操作'}
]
</script>

<style scoped>

</style>